<template>
  <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
            :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
            :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
            :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" :on-before-ok="onSubmit" @close="onCancel">
    <a-form ref="formRef" :model="formState" layout="vertical" :rules="INVITER_EDIT.RULES">


      <a-form-item label="手机号码" field="phone">
        <a-input v-model="formState.phone" allow-clear placeholder="请填写手机号码" :disabled="isUpdate"/>
      </a-form-item>

      <a-form-item label="姓名/昵称" field="name">
        <a-input v-model="formState.name" allow-clear placeholder="请填分销人员姓名或昵称"/>
      </a-form-item>

      <a-form-item label="设置等级" field="level.id">
        <smart-dict v-model="formState.level.id" allow-clear :url="PopOptions.LevelOptions" placeholder="请设置分销人员等级"/>
      </a-form-item>

      <a-form-item label="账号状态" field="state">
        <smart-bool v-model="formState.state" true-text="启用" false-text="禁用"/>
      </a-form-item>
      <a-form-item label="头像照片" field="avatar">
        <smart-upload-image v-model="formState.avatar" :limit="1"/>
      </a-form-item>
    </a-form>

  </a-drawer>
</template>

<script lang="ts" setup>


import {EditDrawer} from '@/libs/core'
import {INVITER_EDIT} from "../resource/form";
import {PopBasicHttp} from '../resource/http'
import {PopOptions} from "@/libs/options";


const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])

const {addInviter, updateInviter} = PopBasicHttp
const config = {tplRecord: INVITER_EDIT.BODY, rawRecord: props.record, rowKey: 'id', emit}


const service = new EditDrawer(config).setAddRequest(addInviter).setUpdateRequest(updateInviter)
const {formRef, formState, LAYER, isUpdate, onCancel, onSubmit} = service
LAYER.title = isUpdate ? '修改分销人员' : '新建分销人员'
</script>
